<template>
  <v-container>
    <v-row class="green mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation=0 fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
        <!-- <v-btn :to="{name:'home'}" class="mx-2" elevation=0 fab dark x-small color="green">
          <v-icon>mdi-keyboard-backspace</v-icon>
        </v-btn> -->
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">商 品 分 类</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    <v-row>
      <v-expansion-panels :readonly="read">
        <v-expansion-panel elevation=0>
          <v-expansion-panel-header>
            <a href="#绿色生活" @click="read = !read">绿色生活</a>
            <a href="#数码产品" @click="read = !read">数码产品</a>
            <a href="#家用电器" @click="read = !read">家用电器</a>
            更多
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <!-- <v-divider></v-divider> -->
            <v-row>
              <v-col>
                <a href="#生活用品">生活用品</a>
              </v-col>
              <v-col>
                <a href="#新鲜蔬果">新鲜蔬果</a>
              </v-col>
              <v-col>
                <a href="#学习用品">学习用品</a>
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <a href="#潮流在线">潮流在线</a>
              </v-col>
              <v-col>
                <a href="#礼品专场">礼品专场</a>
              </v-col>
              <v-col></v-col>
            </v-row>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>


      <v-row dense>
        <v-col v-for="card in cards" :key="card.title" :cols="card.flex">
        <v-row v-if="card.row">
          <h3 class="d-flex justify-center" :id="card.id">{{card.title}}</h3>
        </v-row>
          <v-card v-else flat>
            <v-img :src="card.src" height="120px" contain>
              <!-- <v-card-title v-text="card.title"></v-card-title> -->
            </v-img>
            <br>
            <p class="font-weight-regular text-center" v-text="card.title"></p>
          </v-card>
          <!-- <p class="font-weight-regular text-center" v-text="card.title"></p> -->
        </v-col>
      </v-row>

<!--浮动按钮-->
      <v-fab-transition>
        <v-btn
          class="mb-12 mr-2"
          v-if="btnFlag"
          color="green"
          fab
          dark
          fixed
          bottom
          right
          @click="backTop()"
        >
          <v-icon>publish</v-icon>
          <!-- <v-icon>mdi-arrow-up</v-icon> -->
          <!-- <v-icon>mdi-chevron-up</v-icon> -->
        </v-btn>
      </v-fab-transition>

    <!-- 去掉底部Banner的遮挡 -->
    <v-row>
      <span style="display:inline-block;width:100%;height:44px;"></span>
    </v-row>

<v-bottom-navigation style="position:fixed;" :value="activeBtn" grow color="teal">
      <v-btn :to="{name:'Mall'}" bottom>
        <span>首页</span>
        <v-icon>home</v-icon>
      </v-btn>
      <v-btn :to="{name:'Classify'}">
        <span>分类</span>
        <v-icon>widgets</v-icon>
      </v-btn>
      <v-btn :to="{name:'Myself'}">
        <span>我的</span>
        <v-icon>person</v-icon>
      </v-btn>
    </v-bottom-navigation>

  </v-container>
</template>



<script>
export default {
  data () {
    return {
      activeBtn: 1,
      btnFlag:false,
      read:false,
      cards: [
        {title: '---------------- 绿 色 生 活----------------', flex: 12 ,row:true,id:"绿色生活"},
        {title: '环保清洁', src: require('../assets/环保清洁.jpg'), flex: 4 ,row:false},
        {title: '绿植盆栽', src: require('../assets/绿植盆栽.jpg'), flex: 4 ,row:false},
        {title: '---------------- 数 码 产 品----------------', flex: 12 ,row:true,id:"数码产品"},
        {title: '手机', src: require('../assets/手机.jpg'), flex: 4 ,row:false},
        {title: '耳机', src: require('../assets/耳机.jpg'), flex: 4 ,row:false},
        {title: '蓝牙耳机', src: require('../assets/蓝牙耳机.jpg'), flex: 4 ,row:false},
        {title: '数码相机', src: require('../assets/数码相机.jpg'), flex: 4 ,row:false},
        {title: '---------------- 家 用 电 器----------------', flex: 12 ,row:true,id:"家用电器"},
        {title: '冰箱', src: require('../assets/冰箱.jpg'), flex: 4 ,row:false},
        {title: '空调', src: require('../assets/空调.jpg'), flex: 4 ,row:false},
        {title: '洗衣机', src: require('../assets/洗衣机.jpg'), flex: 4 ,row:false},
        {title: '电风扇', src: require('../assets/电风扇.jpg'), flex: 4 ,row:false},
        {title: '---------------- 生 活 用 品----------------', flex: 12 ,row:true,id:"生活用品"},
        {title: '毛巾', src: require('../assets/毛巾.jpg'), flex: 4 ,row:false},
        {title: '纸巾', src: require('../assets/纸巾.jpg'), flex: 4 ,row:false},
        {title: '湿纸巾', src: require('../assets/湿纸巾.jpg'), flex: 4 ,row:false},
        {title: '---------------- 新 鲜 蔬 果----------------', flex: 12 ,row:true,id:"新鲜蔬果"},
        {title: '蔬菜', src: require('../assets/蔬菜.jpg'), flex: 4 ,row:false},
        {title: '水果', src: require('../assets/水果.jpg'), flex: 4 ,row:false},
        {title: '---------------- 学 习 用 品----------------', flex: 12 ,row:true,id:"学习用品"},
        {title: '文具', src: require('../assets/文具.jpg'), flex: 4 ,row:false},
        {title: '书籍', src: require('../assets/书籍.jpg'), flex: 4 ,row:false},
        {title: '---------------- 潮 流 在 线----------------', flex: 12 ,row:true,id:"潮流在线"},
        {title: '男装', src: require('../assets/男装.jpg'), flex: 4 ,row:false},
        {title: '女装', src: require('../assets/女装.jpg'), flex: 4 ,row:false},
        {title: '童装', src: require('../assets/童装.jpg'), flex: 4 ,row:false},
        {title: '---------------- 礼 品 专 场----------------', flex: 12 ,row:true,id:"礼品专场"},
        {title: '礼品', src: require('../assets/礼品.jpg'), flex: 4 ,row:false},
      ],
    }
  },
  mounted(){
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed(){
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop(){
      let that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if(that.scrollTop === 0){
          clearInterval(timer)
        }
      }, 16)
    },
  // 为了计算距离顶部的高度，当高度大于200显示回顶部图标，小于200则隐藏
    scrollToTop(){
      let that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if(that.scrollTop >100){
        that.btnFlag = true
      }
      else{
        that.btnFlag = false
        that.read=false
      }
    }
  }
}
</script>

<style scoped>
a:LINK {
  color: black;
  text-decoration: none;
}
a:VISITED {
  color: black;
  text-decoration: none;
}
a:HOVER {
  color: black;
  text-decoration: none;
}
a:active {
  color:black;
  text-decoration: none;
}
</style>